<template>

	<ListLayout>

		<Card>
			<template #head>
				基础信息
			</template>
			<template #body>
				<evan-form :model="formData" ref="form">
					<evan-form-item label="项目优先级" prop="level">
						<ItemRow v-model="formData.level" dicKey="itemPriority"></ItemRow>
					</evan-form-item>
					<evan-form-item label="提出日期" prop="startTime">
						<ItemRow v-model="formData.startTime" chooseType="date-picker-ymd"></ItemRow>
					</evan-form-item>
					<evan-form-item label="涉及系统" prop="aboutSystem">
						<ItemRow v-model="formData.aboutSystem" dicKey="aboutSystem" chooseType="select-dic-multiple"></ItemRow>
					</evan-form-item>
					<evan-form-item label="需求标题" prop="title">
						<u-input v-model="formData.title" input-align="right" />
					</evan-form-item>
					<evan-form-item label="期望完成日期">
						<ItemRow v-model="formData.endTime" chooseType="date-picker-ymd"></ItemRow>
					</evan-form-item>
					<evan-form-item label="需求描述">
						<u-input v-model="formData.remark" input-align="right" type="textarea" />
					</evan-form-item>
					<evan-form-item label="需求类型">
						<text>新建</text>
					</evan-form-item>
				</evan-form>
			</template>
		</Card>

		<Card :border="false">
			<template #head>
				<view class="u-flex ">
					<view class="u-flex-1">
						提出科室
					</view>
					<view class="u-flex-1 u-text-right">
						<HButton :block="false" size="small" plain @click="onAddDepartment"> 添加科室</HButton>
					</view>
				</view>
			</template>
		</Card>

		<Card v-for="(item,index) in formDataProposerList">
			<template #head>
				<view class="u-flex ">
					<view class="u-flex-1">
						科室{{index+1}}
					</view>
					<template v-if="index  > 0">
						<view class="u-flex-1 u-text-right">
							<text @click="delFormDataProposerList(index)">
								删除
							</text>
						</view>
					</template>
				</view>
			</template>
			<template #body>
				<evan-form :ref="`formDataProposer${index}`" :key="index" :model="item">
					<evan-form-item prop="organizer" label="科室名称" :rules="rules.organizer">
						<ItemRow v-model="item.organizer" chooseType="select-department"></ItemRow>
					</evan-form-item>
					<evan-form-item label="提出人" :prop="`sponsor`" :rules="rules.sponsor">
						<u-input v-model="item.sponsor" placeholder="请填写提出人" />
					</evan-form-item>
					<evan-form-item label="联系电话" :prop="`phone`" :rules="rules.phone">
						<u-input v-model="item.phone" placeholder="请填写联系电话" />
					</evan-form-item>
				</evan-form>

			</template>
		</Card>


		<AttachmentCard ref="AttachmentCard"></AttachmentCard>



		<template #footer>
			<HButtonGroup @leftClick="leftClick" @rightClick="rightClick">
				<template #left>
					取消
				</template>
				<template #right>
					提交
				</template>
			</HButtonGroup>
		</template>
	</ListLayout>

</template>
<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	import ListLayout from '@/components/layout/listLayout.vue'
	import HButtonGroup from '@/components/buttonGroup/groupTwo.vue'
	import HButton from '@/components/button/index.vue'
	import ItemRow from '@/components/arrow/itemArrow.vue'
	import ProjectApi from '@/apis/project.js'
	import AttachmentCard from '@/components/card/attachment.vue'
	import { attachmentFormatter } from '@/common/submitFormatter.js'
	export default {
		components: {
			Card,
			ListLayout,
			HButtonGroup,
			HButton,
			ItemRow,
			AttachmentCard
		},
		onLoad() {
			console.log(this.$refs, 'refs');
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.form.setRules(this.rules)

			})
		},
		mounted() {
			// console.log(this.$refs, 'refs');
			// 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form

		},
		data() {
			return {
				rules: {
					itemType: [{
						required: true,
						message: '请选择需求类型',

						trigger: 'change',
					}],

					level: [{
						required: true,
						trigger: 'change',
						message: '请选择项目优先级',
					}],
					sponsor: [{
						required: true,
						message: '请填写提出人',

					}],
					organizer: [{
						required: true,
						message: '请选择科室',

					}],
					phone: [{
						required: true,
						message: '请填写联系电话',

					}],
					startTime: [{
						required: true,
						trigger: 'blur',
						message: '提出日期不能为空',
					}],
					aboutSystem: [{
						required: true,
						trigger: 'change',
						message: '请选择涉及系统',

					}],
					title: [{
							required: true,
							trigger: 'change',
							message: '需求标题不能为空',
						},
						{
							max: 100,
							min: 1,
							message: `长度在1到100个字符`,
							trigger: 'blur',
						}
					],
				},

				formDataProposerList: [{
					organizer: null,
					sponsor: '',
					phone: '',
				}],
				formData: {
					id: null,
					itemType: 1,
					organizer: null,
					sponsor: '',
					phone: '',
					aboutSystem: '',
					level: 1,
					startTime: '',
					title: '',
					endTime: '',
					remark: '',
					enclosure: JSON.stringify([]),
					proposerList: [{
						organizer: null,
						sponsor: '',
						phone: '',
					}],
				},

			}
		},
		methods: {
			leftClick() {
				wx.navigateBack()
			},
			delFormDataProposerList(index) {
				this.formDataProposerList.splice(index, 1)
			},
			rightClick() {
				this.$showloading()
				this.$refs['form'].validate(async (valid) => {

					if (valid) {
						let len = this.formDataProposerList.length
						let isValid = false
						for (let i = 0; i < len; i++) {
							this.$refs[`formDataProposer${i}`][0].validate((valid) => {
								isValid = valid
							})
						}

						let { attachment } = this.$refs.AttachmentCard.$data
						if (isValid) {
							let params = {
								itemType: this.formData.itemType,
								aboutSystem: this.formData.aboutSystem,
								level: this.formData.level,
								startTime: this.formData.startTime,
								title: this.formData.title,
								endTime: this.formData.endTime,
								remark: this.formData.remark,
								enclosure: attachmentFormatter(attachment),
								proposerList: JSON.stringify(this.formDataProposerList)
							};
							console.log(params);
							try {
								await ProjectApi.Demand.SubmitDemand(params)
								wx.navigateBack()
							} catch (error) {
								console.log(error, 'error');
								this.$msg(error.msg)

							} finally {

								uni.hideLoading()
							}
						}
					} else {
						uni.hideLoading()
					}
				})

			},
			onAddDepartment() {

				this.formDataProposerList.push({
					organizer: null,
					sponsor: '',
					phone: '',
				})


			}
		}
	}
</script>
